<template>
  <uni-page-wrapper>
    <uni-page-body>
      <uni-popup ref="popup2" type="dialog">
        <uni-popup-dialog
          type="info"
          :title="popup2Title"
          :before-close="true"
          @close="close2"
          @confirm="confirm2" 
        >
          <input type="text" />
        </uni-popup-dialog>
      </uni-popup>
      <uni-view class="bg">
        <uni-view class="headerList">
          <uni-view class="item">
            <uni-view class="t">{{$t("finance.Total investment")}}</uni-view>
            <uni-view class="b">{{investment}}</uni-view>
          </uni-view>
          <uni-view class="item">
            <uni-view class="t">{{$t("finance.Total revenue")}}</uni-view>
            <uni-view class="b">{{revenue}}</uni-view>
          </uni-view>
          <uni-view class="item">
            <uni-view class="t">{{$t("finance.Yesterdays earnings")}}</uni-view>
            <uni-view class="b">{{yesterday}}</uni-view>
          </uni-view>
          <uni-view class="item">
            <uni-view class="t">{{$t("finance.Todays earnings")}}</uni-view>
            <uni-view class="b">{{today}}</uni-view>
          </uni-view>
        </uni-view>
        <uni-view class="stitle">{{$t("finance.Balance transfer in")}}</uni-view>
        <uni-input class="input">
          <div class="uni-input-wrapper">
            <input
              :placeholder='$t("finance.Please enter the investment amount")'
              maxlength="140"
              step=""
              enterkeyhint="done"
              autocomplete="off"
              type=""
              class="uni-input-input"
              :value="investAmount"
              @input="onKeyInput('investAmount', $event)"
            />
          </div>
        </uni-input>
        <uni-view class="stitle" style="margin: 16px 0px"
          >Financial product</uni-view
        >
        <uni-view class="list">
          <uni-view
            class="item"
            :class="picked === item.id ? 'act' : ''"
            v-for="item in productList"
            :key="item.name"
            @click="chooseProduct(item)"
          >
            <uni-view class="font t">{{ item.title }}</uni-view>
            <uni-view class="font c">{{$t("finance.rebate")}}{{ item.rebate }}%</uni-view>
            <uni-view class="font b">{{ item.course }}[1day]</uni-view>
          </uni-view>
        </uni-view>

        <uni-view class="btns">
          <uni-view class="item" @click="transferOut">{{$t("finance.Transfer out")}}</uni-view>
          <uni-view class="item" @click="transferIn">{{$t("finance.Transfer in")}}</uni-view>
        </uni-view>
      </uni-view>
    </uni-page-body>
  </uni-page-wrapper>
</template>

<script>
import service from '@/store/service.js'

import uniPopup from "../../components/uni-popup/uni-popup";
import uniPopupDialog from "../../components/uni-popup-dialog/uni-popup-dialog";


export default {
  components: { uniPopup, uniPopupDialog },

  data() {
    return {
		investment:0,
		revenue:0,
		yesterday:0,
		today:0,
		popup2Title:this.$t("finance.Do you confirm the investment?"),
      productList: [
        {
          name: "One-day",
          tabate: "rebate1.00%",
          day: "1[1day]",
        },
        {
          name: "One-week",
          tabate: "rebate1.50%",
          day: "7[1day]",
        },
        {
          name: "One-month",
          tabate: "rebate2.00%",
          day: "30[1day]",
        },
        {
          name: "Two-months",
          tabate: "rebate3.00%",
          day: "60[1day]",
        },
      ],
      picked: "One-day",
      investAmount: "",
    };
  },
  mounted() {
  	service.auth(this,service.api.app_getfinancial,{},function(self,res){
		self.productList = res.data
		self.today = res.b_amount?res.data:0
		self.yesterday = res.z_amount?res.z_amount:0
		self.investment = res.financial_amount?res.financial_amount:0
		self.revenue = res.detail_amount?res.detail_amount:0
		self.picked = res.data[0].id
	})
  },
  methods: {
    onKeyInput(type, event) {
      this[type] = event.target.value;
    },
    chooseProduct(item) {
      this.picked = item.id;
    },
    close2(done) {
      done();
    },
    confirm2(done, value) {
      //调用接口
      console.log(value);
      done();
	  uni.showLoading()
	  service.auth(this,service.api.app_setfinancial,{
		  id: this.picked,
		  money: this.investAmount
	  },function(self,res){
		  uni.hideLoading()
		  uni.showToast({
		  	title:'success'
		  })
		  
	  })
    },
    transferOut() {
       uni.navigateTo({
        url: "/pages/history/history",
      });
    },
    transferIn() {
      this.$refs.popup2.open();
    },
  },
};
</script>

<style>
@import url(./finance.css);
</style>